
<template>
  <div class="order">
    <view @click="toChangeTab(index)" :class="tabIndex===index?'themeColor text-bold':''" v-for="(item,index) in tabList" :key="index">{{item.name}}</view>
    <view class="padding list">
      <view class="item bg-white radius-lg padding-sm margin-bottom"  v-for="(item,index) in orderList" :key="index">
        <view class="top">
          <view>
            <text class="text-sm">订单编号：{{item.order_no}}</text>
          </view>
          <view class="text-sm">
            <text class="text-right" :class="'text-'+item.status_value">{{item.status_name  }}</text>
          </view>
        </view>
        <div>
          <u-image style="border-radius: 20rpx" width="200" height="180" :src="item.post_url"></u-image>
        </div>
      </view>
      <u-empty mode="order" v-if="list.length === 0"></u-empty>
    </view>

    <div class="news-list">
      <div class="order-item-wrapper" v-for="item in orderList" :key="item.id" @click="toDetail(item)">
        <div class="order-header">
          <text class="text-sm">订单编号：{{item.order_no}}</text>
          <text class="text-right" :class="'text-'+item.status_value">{{item.status_name  }}</text>
        </div>
        <div class="news-item">
          <u-image style="border-radius: 20rpx" width="200" height="180" :src="item.post_url"></u-image>
          <div class="news-right">
            <div class="news-title"> {{ item.ship.name }}</div>
            <div class="news-desc">出发时间： {{ item.cycle.start_time }}</div>
            <div class="news-desc">
              成人*{{ adult_num(item) }}，儿童*{{ child_num(item) }}
            </div>
            <div class="news-desc news-price">
              <span class="price">¥{{ item.amount }}</span>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <button class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click="toUrl('/pages/order/detail?orderId='+item.id)">详情</button>
          <button v-if="item.status_value === 'wait_pay'" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toPay(item)">支付</button>
          <button v-if="item.status_value === 'wait_pay'" class="cu-btn china-btn-bg sphere round" style="margin-right: 5px" @click.stop="toCancel(item)">取消</button>
          <button v-if="item.status_value === 'pay'" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="refundOrder(item)">申请退款</button>
<!--          <button v-if="item.status_value === 'finish'" class="cu-btn lines-orange sphere round" style="margin-right: 5px" @click.stop="commentOrder(item)">评价</button>-->
          <button v-if="item.status_value === 'finish'" class="cu-btn lines-gray sphere round" @click.stop="deleteOrder(item)">删除</button>
        </div>
      </div>
    </div>

    <PayType
        :orderData="orderData"
        @payCallBack="payCallBack"
        ref="payTypeRef"
        source='order'/>
  </div>
</template>
<script>
import PayType from '@/components/PayType.vue'; // 服务时间
/**
 * status: INTEGER, // 订单状态0待支付、1已支付（待出票）2已出票（待开始）3 进行中 4已完成
 * pay_status: INTEGER, // 支付状态 0未支付 1已支付
 *    <el-tab-pane label="全部" name=""></el-tab-pane>
 *       <el-tab-pane label="待付款" name="wait_pay"></el-tab-pane>
 *       <el-tab-pane label="待出票（已支付）" name="pay"></el-tab-pane>
 *       <el-tab-pane label="待开始（已出票）" name="wait_start"></el-tab-pane>
 *       <el-tab-pane label="进行中（已登船）" name="process"></el-tab-pane>
 *       <el-tab-pane label="已完成" name="finish"></el-tab-pane>
 *       <el-tab-pane label="退款中（待审核）" name="return_refund"></el-tab-pane>
 *       <el-tab-pane label="已退款" name="return_refund_finish"></el-tab-pane>
 */
export default {
  name: "index",
  components: {
    PayType
  },
  data() {
    return {
      tabIndex:0,
      tabList:[
        {
          name:'全部',
          id: ''
        },
        {
          name:'待付款',
          id: 'wait_pay'
        },
        {
          name:'待出票',
          id: 'pay'
        },
        {
          name:'已出票',
          id: 'wait_start'
        },
        {
          name:'已完成',
          id: 'finish'
        },
        {
          name:'退款中',
          id: 'return_refund'
        },
      ],
      orderList: [],
      orderData: {},
      cancelShow: false,
      backShow: false,
      deleteShow: false,
      cancelItem:{},
      deleteItem:{},
      backItem: {},
    }
  },
  methods: {
    toChangeTab(index){
      this.tabIndex = index;
      this.getList()
    },
    getList() {
      this.$api.getOrderList({
        status: this.tabList[this.tabIndex].id
      }).then(res => {
        this.orderList = res
      })
    },
    adult_num(item) {
      return item.userList.filter(user => user.is_adult === 1).length
    },
    child_num(item) {
      return item.userList.filter(user => user.is_adult === 0).length
    },
    refundOrder(item){
      uni.showModal({
        title: '提示',
        content: '确定要申请退款吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '请等待'
            })
            this.$api.refundOrder({
              order_no: item.order_no,
            }).then(res => {
              this.getList()
            }).finally(() => {
              uni.hideLoading()
            })
          }
        }
      });
    },
    commentOrder(item){
      uni.navigateTo({
        url: '/pages/order/comment?orderId=' + item.id
      })
    },
    deleteOrder(item){
      uni.showModal({
        title: '提示',
        content: '确定要申请删除吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '请等待'
            })
            this.$api.deleteOrder({
              order_no: item.order_no,
            }).then(res => {
              this.getList()
            }).finally(() => {
              uni.hideLoading()
            })
          }
        }
      });
    },
    toCancel(item){
      uni.showModal({
        title: '提示',
        content: '确定要取消吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '请等待'
            })
            this.$api.cancelOrder({
              order_no: item.order_no,
            }).then(res => {
              this.getList()
            }).finally(() => {
              uni.hideLoading()
            })
          }
        }
      });
    },
    toPay(item){
      this.orderData = item;
      this.$refs.payTypeRef.open()
    },
    payCallBack(){
      uni.showLoading({
        title: '请等待'
      })
      this.wxH5Pay()
    },
    wxH5Pay() {
      let that = this
      this.$api.paymentH5({
        order_no: that.orderData.order_no,
      }).then(res => {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
              appId: res.appid,
              timeStamp: res.timestamp,
              nonceStr: res.nonce_str,
              package: res.package,
              signType: res.signType,
              paySign: res.paySign,
            },
            function(res) {
              console.log('下单成功',res)
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                that.$refs.payTypeRef.close()
                that.getList()
              }
            });
      }).finally(() => {
        uni.hideLoading()
      })
    },
  }
}
</script>

<style lang="scss">
.tab{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  z-index: 9999;
}
.list{
  padding-top: 110rpx;
}
.item{
  .top{
    display: flex;
    justify-content: space-between;
  }
  .project{
    display: flex;
    .image{
      width: 130upx;
      height: 130upx;
      border-radius: 20upx;
    }
    .proBox{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .nameandtime,.cost{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.orderinfo{
  .crow{
    justify-content:space-between
  }
}

.order {
  .order-item-wrapper {
    margin-bottom: 20rpx;
  }
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 8rpx;
    border-bottom: 1px solid #f2f2f2;
    font-size: 28rpx;
  }
  .news-list {
    padding: 0 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
  }
  .detail-button {
    height: 40rpx;
    line-height: 32rpx;
    text-align: center;
    padding: 4rpx 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    background: #FF770F;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
  .news-item {
    padding: 30rpx 0;
    background-color: #ffffff;
    display: flex;
    .news-right {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      margin-left: 40rpx;
      padding-right: 12rpx;
      position: relative;
      .news-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
      .tag-list {
        display: flex;
        margin-top: 20rpx;
        .tag-item {
          padding: 4rpx 8rpx;
          border-radius: 4rpx;
          font-size: 20rpx;
          color: #622898;
          border: 1px solid #814eb1;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }
      .news-desc {
        font-size: 24rpx;
        color: #666666;
        margin-top: 10rpx;
        .price {
          color: #FF770F;
          font-size: 32rpx;
          line-height: 48rpx;
          padding-right: 6rpx;
        }
      }
      .news-price {
        position: absolute;
        right: 20rpx;
        bottom: -20rpx;
      }
      .news-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;
        .news-time {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
